import { FC } from 'react'
import { Link, Outlet } from 'react-router-dom'
import styled from 'styled-components'

const getContacts = async () => {
  return {
    data: 123123
  }
}

export async function loader() {
  const contacts = await getContacts()
  return { contacts }
}

const RootWrap = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  #sidebar {
    width: 40%;
  }

  #detail {
    width: 60%;
  }

`

const Root: FC = () => {
  // const _data = useLoaderData()
  return (
    <RootWrap>
      <div id="sidebar">
        <h1>React Router Contacts</h1>
        <div>
          <form id="search-form" role="search">
            <input
              id="q"
              aria-label="Search contacts"
              placeholder="Search"
              type="search"
              name="q"
            />
            <div
              id="search-spinner"
              aria-hidden
              hidden={true}
            />
            <div
              className="sr-only"
              aria-live="polite"
            ></div>
          </form>
          <form method="post">
            <button type="submit">New</button>
          </form>
        </div>
        <nav>
          <ul>
            <li>
              <Link to={`contacts/1`}>Your Name</Link>
            </li>
            <li>
              <Link to={`contacts/2`}>Your Friend</Link>
            </li>
          </ul>
        </nav>
      </div>
      <div id="detail">
        <Outlet />
      </div>
    </RootWrap>
  )
}

export default Root
